<template>
  <div class="content_from">
    <div class="content_bar">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">基本表单</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content_inner">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="110px"
        size="small"
      >
        <el-form-item label="活动名称">
          <el-col :span="10">
            <el-input
              size="small"
              v-model="form.name"
              placeholder="请输入活动名称"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="参与活动人员" prop="dor" ref="dor">
          <el-col :span="12">
            <el-input v-model="form.dor" placeholder="参与人员"> </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select
            size="small"
            v-model="form.region"
            placeholder="请选择活动区域"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="7">
            <el-date-picker
              size="small"
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style=""
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="1" center>-</el-col>
          <el-col :span="5">
            <el-time-picker
              size="small"
              placeholder="选择时间"
              v-model="form.date2"
              style=""
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="联动数据">
          <el-cascader
            size="small"
            v-model="form.value"
            :options="form.options"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="滑块展示">
          <el-switch
            size="small"
            v-model="form.rant"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="水果多选">
          <el-checkbox-group v-model="form.checkList">
            <el-checkbox label="苹果"></el-checkbox>
            <el-checkbox label="香蕉"></el-checkbox>
            <el-checkbox label="草莓"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="文具单选">
          <el-radio-group v-model="form.radio">
            <el-radio :label="3">铅笔</el-radio>
            <el-radio :label="6">小刀</el-radio>
            <el-radio :label="9">文具盒</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
          <el-col :span="10">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="10">
            <el-button size="small" type="primary" @click="submit('form')"
              >提交表单</el-button
            >
            <el-button size="small" @click="cacle('form')">重置</el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        value: "",
        dor: "",
        rant: "",
        radio: 6,
        desc: "请描述你的信息.....",
        checkList: ["苹果"],
        options: [
          {
            value: "zhinan",
            label: "指南",
            disabled: false,
            children: [
              {
                value: "shejiyuanze",
                label: "设计原则",
                children: [
                  {
                    value: "yizhi",
                    label: "一致",
                  },
                  {
                    value: "fankui",
                    label: "反馈",
                  },
                  {
                    value: "xiaolv",
                    label: "效率",
                  },
                  {
                    value: "kekong",
                    label: "可控",
                  },
                ],
              },
              {
                value: "daohang",
                label: "导航",
                children: [
                  {
                    value: "cexiangdaohang",
                    label: "侧向导航",
                  },
                  {
                    value: "dingbudaohang",
                    label: "顶部导航",
                  },
                ],
              },
            ],
          },
          {
            value: "zujian",
            label: "组件",
            children: [
              {
                value: "basic",
                label: "Basic",
                children: [
                  {
                    value: "layout",
                    label: "Layout 布局",
                  },
                  {
                    value: "color",
                    label: "Color 色彩",
                  },
                  {
                    value: "typography",
                    label: "Typography 字体",
                  },
                  {
                    value: "icon",
                    label: "Icon 图标",
                  },
                  {
                    value: "button",
                    label: "Button 按钮",
                  },
                ],
              },
              {
                value: "form",
                label: "Form",
                children: [
                  {
                    value: "radio",
                    label: "Radio 单选框",
                  },
                  {
                    value: "checkbox",
                    label: "Checkbox 多选框",
                  },
                  {
                    value: "input",
                    label: "Input 输入框",
                  },
                  {
                    value: "input-number",
                    label: "InputNumber 计数器",
                  },
                  {
                    value: "select",
                    label: "Select 选择器",
                  },
                  {
                    value: "cascader",
                    label: "Cascader 级联选择器",
                  },
                  {
                    value: "switch",
                    label: "Switch 开关",
                  },
                  {
                    value: "slider",
                    label: "Slider 滑块",
                  },
                  {
                    value: "time-picker",
                    label: "TimePicker 时间选择器",
                  },
                  {
                    value: "date-picker",
                    label: "DatePicker 日期选择器",
                  },
                  {
                    value: "datetime-picker",
                    label: "DateTimePicker 日期时间选择器",
                  },
                  {
                    value: "upload",
                    label: "Upload 上传",
                  },
                  {
                    value: "rate",
                    label: "Rate 评分",
                  },
                  {
                    value: "form",
                    label: "Form 表单",
                  },
                ],
              },
              {
                value: "data",
                label: "Data",
                children: [
                  {
                    value: "table",
                    label: "Table 表格",
                  },
                  {
                    value: "tag",
                    label: "Tag 标签",
                  },
                  {
                    value: "progress",
                    label: "Progress 进度条",
                  },
                  {
                    value: "tree",
                    label: "Tree 树形控件",
                  },
                  {
                    value: "pagination",
                    label: "Pagination 分页",
                  },
                  {
                    value: "badge",
                    label: "Badge 标记",
                  },
                ],
              },
              {
                value: "notice",
                label: "Notice",
                children: [
                  {
                    value: "alert",
                    label: "Alert 警告",
                  },
                  {
                    value: "loading",
                    label: "Loading 加载",
                  },
                  {
                    value: "message",
                    label: "Message 消息提示",
                  },
                  {
                    value: "message-box",
                    label: "MessageBox 弹框",
                  },
                  {
                    value: "notification",
                    label: "Notification 通知",
                  },
                ],
              },
              {
                value: "navigation",
                label: "Navigation",
                children: [
                  {
                    value: "menu",
                    label: "NavMenu 导航菜单",
                  },
                  {
                    value: "tabs",
                    label: "Tabs 标签页",
                  },
                  {
                    value: "breadcrumb",
                    label: "Breadcrumb 面包屑",
                  },
                  {
                    value: "dropdown",
                    label: "Dropdown 下拉菜单",
                  },
                  {
                    value: "steps",
                    label: "Steps 步骤条",
                  },
                ],
              },
              {
                value: "others",
                label: "Others",
                children: [
                  {
                    value: "dialog",
                    label: "Dialog 对话框",
                  },
                  {
                    value: "tooltip",
                    label: "Tooltip 文字提示",
                  },
                  {
                    value: "popover",
                    label: "Popover 弹出框",
                  },
                  {
                    value: "card",
                    label: "Card 卡片",
                  },
                  {
                    value: "carousel",
                    label: "Carousel 走马灯",
                  },
                  {
                    value: "collapse",
                    label: "Collapse 折叠面板",
                  },
                ],
              },
            ],
          },
          {
            value: "ziyuan",
            label: "资源",
            children: [
              {
                value: "axure",
                label: "Axure Components",
              },
              {
                value: "sketch",
                label: "Sketch Templates",
              },
              {
                value: "jiaohu",
                label: "组件交互文档",
              },
            ],
          },
        ],
      },
      copy: [],
      rules: {
        dor: [
          { required: true, message: "请输入活动人员名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.copy = JSON.parse(JSON.stringify(this.form));
  },
  methods: {
    submit(obj) {
      this.$refs[obj].validate((valid) => {
        if (valid) {
          this.$message({
            type: "success",
            message: "提交成功",
          });
          console.log(this.form)
        } else {
          this.$message({
            type: "warning",
            message: "提交失败",
          });
          return false;
        }
      });
    },
    cacle(w) {
      this.$refs[w].resetFields();
      this.form = {
        name: "",
        region: "",
        value: "",
        dor: "",
        rant: "",
        radio: 6,
        desc: "请描述你的信息.....",
        checkList: ["苹果"],
      };
    },
    // this.$confirm("取消提交表单", "提示", {
    //     type: "danger",
    //     message: "取消提交表单",
    //   })
    //     .then(() => {
    //       window.alert("确定");
    //     })
    //     .catch(() => {
    //       Window.alert("取消");
    //     });
  },
};
</script>

<style scoped>
.content_from {
  background: #f0f0f0;
  padding: 0 10px;
  box-sizing: border-box;
}
.content_bar {
  padding: 20px 0;
  box-sizing: border-box;
}
.content_inner {
  /* height: 100vh; */
  padding: 20px 30px;
  box-sizing: border-box;
  border: 1px solid #999;
  background: #fff;
  border-radius: 5px;
}
.el-form-item {
  margin-bottom: 20px;
}
</style>